<template>
  <d2-container>
    <el-table :data="tableData" style="width: 100%" stripe size="mini" v-loading="loading">
      <el-table-column prop="loginName" label="登录名称">
      </el-table-column>
      <el-table-column prop="userName" label="用户名称">
      </el-table-column>
      <el-table-column prop="userTel" label="联系方式">
      </el-table-column>
      <el-table-column prop="createDate" label="创建日期">
      </el-table-column>
      <el-table-column   label="角色">
        <template slot-scope="scope">
            <span v-for="item in ruleList" v-if="item.id==scope.row.ruleId">{{item.ruleName}}</span>
            
        </template>
      </el-table-column>

      <el-table-column align="right" width="260">
        <template slot="header" slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="onAddUser">新增</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="success" plain @click="onUpdateUser(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="onDelUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <template slot="footer">
    <el-pagination background  :page-size="page.size"   layout="prev, pager, next"
      :total="page.total"  @size-change="handleSizeChange" :current-page.sync="currentPage"  @current-change="handleCurrentChange">
    </el-pagination>
    </template>
    <dialogUserModify ref="dialogUserModify" @userChanged="onUserChanged" ></dialogUserModify>
  </d2-container>
</template>
<script>
import { mapActions } from "vuex"
import { PAGE_SIZE } from "@/const"
export default {
   mounted() {
    this.bindData()
    this.getRuleList().then(res=>{
      
      this.ruleList=res
    })
  },
  data() {
    return {
      currentPage:4,
      loading:false,
      showModifyMenu: false,
      tableData: [
       
      ],
      page : {
        size:PAGE_SIZE,
        total:0,
        index:1
      },
      ruleList:[]
    };
  },
  methods: {
    ...mapActions('pms/sys.user',['getPage','userDelete']),
    ...mapActions('pms/sys.rule',['getRuleList']),
    onAddUser (){
      this.$refs.dialogUserModify.showDialog()
    },
    onUpdateUser(row) {
      this.$refs.dialogUserModify.showDialog(row)
     
    },
    onDelUser(row) {
      this.$confirm("确认删除该条记录吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.userDelete(row.id).then(()=>{
              this.$message({
              type: "success",
              message: "删除成功!"
            })
            this.bindData()
          });  
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    onDelConfirm() {
      this.showDelConfirm = false;
    
      this.$message({
        message: "删除成功",
        type: "success"
      });
    },
    onUserChanged(){
      this.bindData()
    },
    bindData(){
      this.loading = true
      this.getPage({page:this.page}).then(result => {
        console.log("开始")
        console.log(this.page)
        this.tableData = result.data
        this.page=result.page
        this.loading = false
      })
    },
    showModifyMenuDialog(row) {
      this.showModifyMenu = true;
      this.currentModifyMenuRow = row;
    },
    onModifyMenu() {
      //在用户修改了菜单之后执行
      this.showModifyMenu = false;
    
    },
    handleSizeChange(val) {
      this.page.index=val
      this.bindData()
        
    },
    handleCurrentChange(val) {
      
      this.page.index=val
      this.bindData()
    }
  },
  components:{
    dialogUserModify:() => import("./dialog-user-modify"),
    // dialogUserMenu:() => import("./dialog-user-menu")
  }
};
</script>